<template>
    <div class="cu-modal" :class="{ show: showReport }" @click="closeAuthModal">
        <div class="cu-dialog" style="width: 890px;" @click.stop>
            <div class="p-30">
                <div class="head-box">
                    <div class="head-title">一键举报</div>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="举报类型" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择举报类型" style="width: 100%">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="举报厂商" prop="manufacturer">
                        <el-select v-model="ruleForm.type" placeholder="请选择举报厂商" style="width: 100%">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="举报理由" prop="content">
                        <el-input type="textarea" :rows="8" placeholder="请输入举报理由" v-model="ruleForm.content"
                            maxlength="200" show-word-limit>
                        </el-input>
                    </el-form-item>

                    <el-form-item class="text-left">
                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <div class="flex align-items flex-wrap center">
                                <i class="el-icon-plus"></i>
                                <div class="w-100">上传图片</div>
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item class="text-center">
                        <el-button @click="closeAuthModal">取消</el-button>
                        <el-button type="danger" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
/**
 * 意见反馈弹窗
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex'
import test from '@/utils/test'
import request from '@/utils/request'
export default {
    name: 'reportModal',
    data () {
        return {
            options: [{
                value: "选项1",
                label: "黄金糕",
            },
            {
                value: "选项2",
                label: "双皮奶",
            },
            {
                value: "选项3",
                label: "蚵仔煎",
            },
            {
                value: "选项4",
                label: "龙须面",
            },
            {
                value: "选项5",
                label: "北京烤鸭",
            },
            ],

            dialogImageUrl: '',
            ruleForm: {
                type: '',
                manufacturer: '',
                content: '',
            },
            rules: {
                type: [
                    { required: true, message: '请选择举报类型', trigger: 'blur' }
                ],
                manufacturer: [
                    { required: true, message: '请选择举报厂商', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入举报理由', trigger: 'blur' },
                    { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['initStore', 'isLogin', 'isShowReportModal']),
        showReport: {
            get () {
                return !!this.isShowReportModal
            },
            set (value) {

            }
        },
    },
    methods: {
        ...mapActions(['getUserInfo', 'showReportModal']),
        // 关闭模态框
        closeAuthModal () {
            this.$store.dispatch('showReportModal', false)
        },
        handleAvatarSuccess (res, file) {
            this.imageUrl = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload (file) { },
        handleClose (done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done()
                })
                .catch((_) => { })
        },
        handleRemove (file, fileList) {
            console.log(file, fileList)
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    },
}
</script>

<style lang="less" scoped>
/deep/.el-upload {
    width: 88px;
    height: 88px;
    line-height: 36px;

    i {
        margin-top: 15px;
    }
}
</style>